---
type: integration
title: '@astrojs/preact'
description: Aprende como usar la integración @astrojs/preact para ampliar la compatibilidad de Alpinejs en tu proyecto de Astro.
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/preact/'
category: renderer
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Esta **[integración de Astro][astro-integration]** habilita el renderizado del lado del servidor y la hidratación del lado del cliente para tus componentes de [Preact](https://preactjs.com/).

## ¿Por qué Preact?

Preact es una biblioteca que te permite construir componentes UI interactivos para la web. Si deseas crear características interactivas en tu sitio web utilizando JavaScript, es posible que prefieras usar su formato de componentes en lugar de usar directamente las API del navegador.

Preact también es una gran opción si has utilizado anteriormente React. Preact proporciona la misma API que React, pero en un paquete mucho más pequeño de 3kB. Incluso admite la representación de muchos componentes de React mediante la opción de configuración `compat` (consulta a continuación).

**¿Quieres aprender más sobre Preact antes de usar esta integración?**\
Revisa [“Aprende Preact en 10 minutos”](https://preactjs.com/tutorial), un tutorial interactivo en su sitio web.

## Instalación

Astro incluye un comando `astro add` para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes [instalar las integraciones manualmente](#instalación-manual) en su lugar.

Para instalar `@astrojs/preact`, ejecuta lo siguiente desde el directorio de tu proyecto y sigue las indicaciones:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npx astro add preact
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm astro add preact
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn astro add preact
  ```
  </Fragment>
</PackageManagerTabs>

Si tienes algún problema, [no dudes en informarnos en GitHub](https://github.com/withastro/astro/issues) y prueba los pasos de instalación manual a continuación.

### Instalación manual

Primero, instala el paquete `@astrojs/preact`:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install @astrojs/preact
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add @astrojs/preact
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add @astrojs/preact
  ```
  </Fragment>
</PackageManagerTabs>

La mayoría de los gestores de paquetes instalarán las dependencias asociadas también. Si ves un mensaje de advertencia "Cannot find package 'preact'" (o similar) cuando inicias Astro, deberás instalar Preact:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install preact
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add preact
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add preact
  ```
  </Fragment>
</PackageManagerTabs>

Luego, aplica la integración a tu archivo `astro.config.*` utilizando la propiedad `integrations`:

```js title="astro.config.mjs" ins={2} ins="preact()"
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';

export default defineConfig({
  // ...
  integrations: [preact()],
});
```

## Uso

Para usar tu primer componente de Preact en Astro, dirígete a nuestra [documentación de frameworks UI][astro-ui-frameworks]. Allí explorarás:

* 📦 cómo se cargan los componentes del framework,
* 💧 opciones de hidratación en el lado del cliente, y
* 🤝 oportunidades para mezclar y anidar diferentes frameworks juntos.

También puedes revisar nuestra [Documentación de Integración de Astro][astro-integration] para obtener más información sobre las integraciones.

## Configuración

La integración de Astro con Preact se encarga de cómo se renderizan los componentes de Preact y tiene sus propias opciones. Puedes cambiar estas opciones en el archivo `astro.config.mjs` donde se encuentran las configuraciones de integración de tu proyecto.

Para el uso básico, no es necesario configurar la integración de Preact en Astro.

### compat

Puedes habilitar `preact/compat`, la capa de compatibilidad de Preact para renderizar componentes de React sin necesidad de instalar o enviar las bibliotecas más grandes de React a los navegadores web de tus usuarios.

Para hacerlo, pasa un objeto a la integración de Preact y establece `compat: true`.

```js title="astro.config.mjs" "compat: true"
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';

export default defineConfig({
  integrations: [preact({ compat: true })],
});
```

Con la opción `compat` habilitada, la integración de Preact renderizará tanto los componentes de React como los componentes de Preact en tu proyecto y también te permitirá importar componentes de React dentro de componentes de Preact. Lee más en [“Cambiando a Preact (de React)”](https://preactjs.com/guide/v10/switching-to-preact) en el sitio web de Preact.

Cuando se importan librerías de componentes de React, para reemplazar las dependencias `react` y `react-dom` como `preact/compat`, puedes utilizar [`overrides`](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides) para hacerlo.

```json
// package.json
{
  "overrides": {
    "react": "npm:@preact/compat@latest",
    "react-dom": "npm:@preact/compat@latest"
  }
}
```

Consulta las documentaciónes de [`pnpm` overrides](https://pnpm.io/package_json#pnpmoverrides) y [`yarn` resolutions](https://yarnpkg.com/configuration/manifest#resolutions) para conocer sus respectivas características de anulación de dependencias.

:::note
Actualmente, la opción `compat` solo funciona para las bibliotecas de React que exportan código como ESM. Si ocurre un error durante la compilación, intenta agregar la biblioteca a `vite.ssr.noExternal: ['the-react-library']` en tu archivo `astro.config.mjs`.
:::

## Opciones

### Combinando múltiples frameworks JSX

Cuando estás utilizando múltiples frameworks JSX (React, Preact, Solid) en el mismo proyecto, Astro necesita determinar qué transformaciones específicas del framework JSX deben usarse para cada uno de tus componentes. Si solo has agregado una integración de framework JSX a tu proyecto, no se necesita configuración adicional.

Utiliza las opciones de configuración `include` (obligatoria) y `exclude` (opcional) para especificar qué archivos pertenecen a qué framework. Proporciona un array de archivos y/o carpetas en `include` para cada framework que estés utilizando. Puedes utilizar comodines para incluir múltiples rutas de archivo.

Recomendamos colocar los componentes comunes de los frameworks en la misma carpeta (p. ej. `/components/react/` y `/components/solid/`) para facilitar la especificación de tus inclusiones, pero esto no es obligatorio:

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';

export default defineConfig({
  // Habilita varios frameworks para admitir todo tipo de componentes diferentes.
  // ¡No se necesita `include` si solo estás utilizando un solo framework JSX!
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*'],
    }),
  ],
});
```

## Ejemplos

* El [ejemplo Astro Preact](https://github.com/withastro/astro/tree/latest/examples/framework-preact) muestra cómo utilizar un componente interactivo de Preact en un proyecto de Astro.
* El [ejemplo de Astro Nanostores](https://github.com/withastro/astro/tree/latest/examples/with-nanostores) muestra cómo compartir el estado entre diferentes componentes, e incluso diferentes frameworks, en un proyecto de Astro.

[astro-integration]: /es/guides/integrations-guide/

[astro-ui-frameworks]: /es/guides/framework-components/#usando-componente-de-framework
